<template>
  <div class="content-wrap" id="wrap">
    <!-- <el-image style="width: 100%; height: 100%" :src="src" fit="fill" usemap="#Map" id="qw"></el-image> -->



    <!-- 底图容器 -->
    <!-- <img id="base-image" :src="src" fit="fill" usemap="#Map" alt="Base Image" @click="handleImageClick">

    <map name="Map" id="Map">
      <area id="1001" shape="rect" coords="0,0,500,500" href="javascript:void(0)" @click="handlerFloor('1幢')" />
    </map> -->


    <div class="form-container">
      <div class="form-row">
        <label for="input1">车牌号：</label>
        <input id="input1" type="text" v-model="carNumber" />
        <button type="button" @click="dialogFormVisible = true">搜索</button>
      </div>
    </div>



    <el-dialog :title="搜索车牌" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form :model="formData"  label-position="left" label-width="100px">
        <el-row>
          <el-form-item label="车牌">
            <el-input v-model="formData.carNumber" readonly></el-input>

          </el-form-item>
        </el-row>
        
            <el-form-item label="楼层">
              <el-input type="text" v-model="formData.floorNum" readonly></el-input>

            </el-form-item>

            <el-form-item label="区域">
              <el-input type="text" v-model="formData.area" readonly></el-input>
            </el-form-item>
       

        <el-form-item label="停车车位号">
            <el-input type="text" v-model="formData.parkNumber" readonly></el-input>
        </el-form-item>

        <el-form-item label="停放状态">
            <el-input type="text" v-model="formData.state" readonly></el-input>
        </el-form-item>

        <el-form-item label="停放类型">
            <el-input type="text" v-model="formData.type" readonly></el-input>
        </el-form-item>

        <el-form-item label="入场时间">
            <el-input type="text" v-model="formData.comeinTime" readonly></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>




  </div>
</template>
<script>
export default {
  name: 'reverseguidance',
  data() {
    return {
      src: require('./park-new.png'),
      carNumber: "",
      dialogFormVisible: false,
      formData: {
        carNumber: "苏A871S",
        floorNum: "F1",
        area: "A",
        parkNumber: "1001",
        state: "停放中",
        type: "长期停放",
        comeinTime: "2023-12-30 14:00:00"

      }
    };
  }
};
</script>
<style lang="scss" scoped>
.content-wrap {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: Arial, sans-serif;
  background-image: url(./park-new.png);
  background-size: cover;
  /* 使用 cover 值保持背景图等比例放大 */
  background-repeat: no-repeat;
  background-position: center center;

}


#base-image {
  flex: 1;
  /* 这里可以设置底图的样式，例如宽度、高度等 */
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 保持图片比例并填充容器 */
  //cursor: pointer;
}


.form-container {
  width: 300px;
  /* 根据需要调整表单容器的宽度 */
  padding: 20px;
  //margin: auto;
  position: relative;
  flex: 1;
  top: 8%;
  left: 70%;
  flex-direction: row-reverse;

}

.form-container input {
  width: 100px;
  text-align: center;
  color: yellow;
  background-color: black;
  height: 28px;
}

.form-container label {
  font-size: 16px;
  color: white;
}

.form-row {
  margin-bottom: 10px;
}

.form-container button {
  border: 1px solid #DCDFE6;
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  margin-left: 5px;
}

/* 添加其他样式，如字体颜色、边框等 */
</style>